<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title> ztree </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/static/ztree/css/demo.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ztree/css/zTreeStyle/zTreeStyle.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>

    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/ztree/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/ztree/js/jquery.ztree.excheck.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/ztree/js/jquery.ztree.all.js}"></script>
</head>
<body>
    <div>
        <input type="hidden" th:id="roleId" th:value="${roleId}"/>
        <ul style="margin: 10px 10px 0px 100px" id="treeDemo" class="ztree"></ul>
    </div>

    <div>
        <button class="layui-btn layui-btn-normal" style="height: 30px;width: 100px;margin: 10px 10px 0px 100px" id="btn" value="提交">提交</button>
    </div>
</body>
</html>

<script >
    $("#btn").click(function () {
        var roleId = $("#roleId").val();//角色id
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
        var nodeString = '';//所有选中的权限id用逗号分隔的字符串
        $.each(nodes, function (n, value) {
            if(n>0){
                nodeString += ',';
            }
            nodeString += value.id;
        });

        $.ajax({
            url: '/bg/dicRoleAcl/addRoleAcl',
            type: 'post',
            dataType: 'json',
            data: {'roleId':roleId,'nodeString':nodeString},
            success: function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 1, time: 500,offset: 't'}, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    });
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                }
            }
        })
    })
</script>

<script>
    
    $(function () {
        var roleId = $("#roleId").val();//角色id
        $.ajax({
            url : '/bg/dicRoleAcl/findSetAcl',
            type : 'post',
            dataType : 'json',
            data: {'roleId':roleId},
            success : function (data) {

                if (data.code==200){
                    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
                    var setting = {
                        treeNode:{
                            enable:true// 如果需要初始化默认节点被勾选，请设置 treeNode.checked 属性 true 表示节点的输入框被勾选 false 表示节点的输入框未勾选
                        },
                        view: {
                            dblClickExpand: false,//是否双击展开
                            showLine: true,//设置为显示或隐藏线条
                            selectedMulti: false,//设置是否允许选择多个节点
                            expandSpeed: "fast",//节点展开动画速度  "slow"、 "normal"、"fast"
                            showIcon: true,//设置为显示或隐藏节点图标
                            // fontCss : {color:"red"},//个性化的文本样式
                            dblClickExpand: true, //双击展开父节点的功能
                        },
                        data: {
                            simpleData: {
                                //true / false 分别表示 使用 / 不使用 简单数据模式
                                //如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
                                enable: true,
                                idKey: "id",
                                pIdKey: "pid",
                                rootPId: "0"
                            }
                        },
                        check:{
                            enable:true,// true / false 分别表示 显示 / 不显示 复选框或单选框
                            chkStyle: "checkbox",//复选框类型
                            chkboxType: { "Y": "ps", "N": "ps" }//当一个节点被选中或未选中时，控制其父节点及其子节点自动选中或取消选中p:父节点  s:子节点
                        }
                    };
                    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

                    var zNodes = data.data;

                    $(document).ready(function(){
                        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    });

                }else{
                    layer.msg(data.msg,{icon: 2, time: 1000});
                }
            }
        })
    })
    
</script>



